CSS - Natour Part2

Today’s notes is for the Section 5, Lecture 39-41 of this udemy course.

How to have a flipping card

<div class="card">
    <div class="card__side card__side--front">
        ...
    </div>
    <div class="card__side card__side--back">
        ...
    </div>
</div>

.card {
    position: relative;
    height: 52rem;
    perspective: 1500rem; // for control the rotate angle, the bigger the smoother

    &__side {
        position: absolute; // to make the two div positioned at the same place
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all .8s ease;
        border-radius: 3px;
        overflow: hidden; // to keep the border radius no matter the shape of child elements
        backface-visibility: hidden; // to hide the element when rotated to the back

        &--back {
            transform: rotateY(180deg); // set the back div initially to be rotated back
        }

         
    }
    &:hover &__side--front {
        transform: rotateY(-180deg); // when hover, rotate the front div to the back
    }  
    &:hover &__side--back {
        transform: rotateY(0); // when hover, rotate the back div to the front
    }  
}

How to clip & blend the background image

Clip background image

.card__picture {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); 
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); // clip the thing, params as left top, right top, right bottom, left bottom
}

Blend background image

.card__picture {
    background-blend-mode: screen; // only supported in certain browsers, IE not included
}

How to set the decoration for span break

When an inline element got broke into several different lines, how to keep the decoration consistent for all the lines? For example padding distance.

.card__heading--span {
    -webkit-box-decoration-break: clone; // keep it consistent
    box-decoration-break: clone;
}